<template>
	<view class="page-top">
		<np-canvas ref="npShareCanvas" :qrcode="qrcode"></np-canvas>
		<np-qrcode ref="qrcode" :val="userShareLink" :size="350" :show="false" :loadMake="false" :usingComponents="false"
		 :showLoading="true" loadingText="海报生成中" @result="userQr"></np-qrcode>
		<!-- #ifdef H5 -->
		<view v-if="showCanvas" class="canvas-tip">
			<text>点击图片，然后长按图片可保存</text>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		mixins: [base],
		data() {
			return {
				showCanvas: false,
				qrcode: "",
				userShareLink: ""
			}
		},
		onLoad() {
			
		},
		onReady() {
			// #ifdef H5
			let domain = this.globalConfig.h5;
			if (!domain) {
				domain = window.location.host;
			}
			this.userShareLink = window.location.protocol + "//" + domain + "/pages/tabbar/index?uid=" + this
				.userInfo.id;
			setTimeout(() => {
				this.creatQrcode();
			}, 100);
			// #endif
			// #ifdef MP-WEIXIN
			this.getQrCode();
			// #endif
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			userQr(e) {
				this.qrcode = e;
				this.startCanvas();
				this.showCanvas = true;
			},
			startCanvas() {
				this.$refs.npShareCanvas.open();
			},
			getQrCode() {
				uni.showLoading({
					title: "载入中..."
				});
				this.$http.get('api/user/qr-code').then((res) => {
					uni.hideLoading();
					this.saveQrcode(res.image)
				}).catch((err) => {
					uni.hideLoading();
					this.$config.toast(err.message);
				});
			},
			saveQrcode(url) {
				uni.downloadFile({
					url: url,
					success: (res) => {
						this.qrcode = res.tempFilePath;
						this.startCanvas();
						this.showCanvas = true;
					},
					fail: () => {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-top {
		padding-bottom: 20upx;

		.canvas-tip {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 100rpx;
		}

		.share-info {
			margin: 20upx;

			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-id {
				margin-top: 20upx;
				margin-bottom: 20upx;
				color: red;
				font-size: 18px;
				font-weight: bold;
			}

			.qrcode {
				width: 100%;
				height: 800upx;
				border-radius: 20upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.my-link-text {
				width: 80%;
				font-size: 12pt;
				font-weight: bold;
			}

			.my-link {
				display: flex;
				flex-wrap: nowrap;
				overflow: hidden;
				height: 80upx;
				line-height: 80upx;
				width: 80%;
				margin: 20upx 0;
				background-color: rgba(0, 0, 0, 0.3);
				color: #fff;
				font-size: 9pt;
				padding: 0 10upx;
				border-radius: 10upx;
			}

			.share-button {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.btn {
					width: 260upx;
					height: 60upx;
					line-height: 60upx;
					margin: 0 20upx 20upx 20upx;
					margin-top: 60upx;
					border-radius: 40upx;
					border: 0;
					font-size: 26upx;
					outline: 0;
					background: #33b17b;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.share-text {
				width: 90%;
				display: flex;
				flex-direction: column;
				line-height: 60upx;
				margin-bottom: 20upx;

				text {
					font-size: 8pt;
					color: #666;
				}
			}
		}
	}
</style>
